<script setup lang="ts">
import { ref } from 'vue';
import { LockOutlined } from '@ant-design/icons-vue';
import { useFeatureUnlock } from '../../../composables';
import {
  FEATURE_UNLOCK_ID,
  type FeatureId,
} from '../../../game/data/feature-unlock/type';
import { EVENTS, GameKernel } from '../../../game';

const emit = defineEmits<{
  (e: 'select', id: FeatureId): void;
}>();

const { state: featureUnlockState } = useFeatureUnlock();

const activeMenu = ref<FeatureId>(FEATURE_UNLOCK_ID.CULTIVATION);
const menuList = ref<{ id: FeatureId; label: string }[]>([
  {
    id: FEATURE_UNLOCK_ID.CULTIVATION,
    label: '修炼',
  },
  {
    id: FEATURE_UNLOCK_ID.BACKPACK,
    label: '背包',
  },
  {
    id: FEATURE_UNLOCK_ID.WORLD,
    label: '世界',
  },
  {
    id: FEATURE_UNLOCK_ID.SECT,
    label: '宗门',
  },
  {
    id: FEATURE_UNLOCK_ID.HOME,
    label: '洞府',
  },
]);

function isUnlocked(featureId: FeatureId) {
  return featureUnlockState.value.unlockedFeatures.includes(featureId);
}

function menuDisabled(featureId: FeatureId) {
  return !isUnlocked(featureId);
}

function onMenuClick(id: FeatureId) {
  activeMenu.value = id;
  emit('select', id);
}

function init() {
  const firstUnlocked = menuList.value.find((m) => isUnlocked(m.id));
  const id = firstUnlocked ? firstUnlocked.id : FEATURE_UNLOCK_ID.BACKPACK;
  activeMenu.value = id;
  emit('select', id);
}

GameKernel.inst.bus.on(EVENTS.GAME_START, () => {
  init();
});
</script>

<template>
  <div
    class="grid grid-cols-5 gap-2 p-2 flex-none border-0 border-t border-solid border-border"
  >
    <div v-for="menu in menuList" :key="menu.id">
      <a-button
        :block="true"
        :disabled="menuDisabled(menu.id) || menu.id === activeMenu"
        @click="onMenuClick(menu.id)"
      >
        <lock-outlined v-if="menuDisabled(menu.id)" />
        <span v-else>{{ menu.label }}</span>
      </a-button>
    </div>
  </div>
</template>
